import React from "react"
import styles from "./highPostDetail.less"
import {SendOutlined,SaveOutlined} from "@ant-design/icons"
import {Button, Form, Input,Slider,Select} from "antd"
import {observer} from "mobx-react-lite"
import useStore from "@/context/useStore"
import { useEffect } from 'react';
import {IRouteComponentProps} from 'umi'
// import SkillDescription from '@/components/skillDescription'
import { ISkillAddItem } from "@/utils/interface"
import SkillDescriptionV2 from '@/components/SkillDescriptionV2'



const HighPostDetail:React.FC<IRouteComponentProps>=({history,location,match})=>{

    //从url参数中获取stationVersionId
    let stationVersionId = location.query.stationVersionId;
    //获取仓库的skill模块
    let {skill}=useStore()
    //创建表单实例
    const [form] = Form.useForm();

    useEffect(() => {
        if (stationVersionId){
            skill.getSkillDetail(stationVersionId as string);
        }
    }, [stationVersionId])

    useEffect(() => {
        let {majorId, name, stationVersion} = skill.skillAddItem;
        let {describes, salaryList, stationTask} = skill.skillAddItem.stationLevelList[0];
        form.setFieldsValue({
            majorId, name, stationVersion, describes, salaryList, stationTask
        })
    }, [skill.skillAddItem]);

    async function addPostSkill(res: ISkillAddItem){
        let stationVersionId = await skill.addPostSkill(res);
        history.replace(`/teachers/addPostSkill?stationVersionId=${stationVersionId}&see=false`)
    }


    console.log('skillAddItem...', skill.skillAddItem);
    return (
        <div className={styles.addpostskill}>
            <div className={styles.addpost}>
                <section>
                    <div className={styles.but}>
                       
                      
                    </div>
                </section>
                <section>
                    <div className={styles.title}>
                        <h2>基本信息</h2>
                        <Button>返回</Button>
                        
                    </div>
                    <Form form={form} key={JSON.stringify(skill.skillAddItem)} initialValues={{...skill.skillAddItem, ...skill.skillAddItem.stationLevelList[0]}} onFinish={addPostSkill}>
                       
                        <div className={styles.form_top}>
                            <Form.Item label="岗位名称" name="name" rules={[{required: true, message:"请输入岗位名称"}]}>
                                <Input />
                            </Form.Item>
                            <Form.Item label="专业" name="majorId" rules={[{required: true, message:"请选择专业"}]}>
                                <Select>
                                    {
                                        skill.skillLabel.map(item=>{
                                            return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item label="版本号 V" name="stationVersion" rules={[{required: true, message:"请输入版本号"}]}>
                                <Input type="number"/>
                            </Form.Item>
                            <Form.Item label="作者" name="userName" >
                                <span>郭老师</span>
                            </Form.Item>
                        </div>
                        <div className={styles.form_bot}>
                            <Form.Item label="薪酬范围" name="salaryList" rules={[{required: true, message:"请输入薪酬范围"}]}>
                                <Slider range min={0} max={50000} disabled={true}/>
                            </Form.Item>
                            <Form.Item label="岗位描述" name="describes" rules={[{required: true, message:"请输入岗位描述"}]}>
                                <Input type="textarea" placeholder="请输入岗位描述" className={styles.ipt}></Input>
                            </Form.Item>
                            <Form.Item label="岗位任务" name="stationTask" >
                                <Input type="textarea" placeholder="请输入岗位任务"></Input>
                            </Form.Item>
                        </div>
                    </Form>
                </section>
                <section>
                    {/* <SkillDescription /> */}
                    <SkillDescriptionV2 stationVersionId={stationVersionId}/>
                </section>
            </div>
        </div>
    )
}

export default observer(HighPostDetail)